<template>
    <div class="user">
        <commonUserinfo :userInfoData="{userItemIndex:itemIndex,userLeftHeight:userLeftHeight,$parent:$parent}">
            <div id="applyInfo" class="user_main_right f_left text_center" ref="userRightH">
                <div class="user_userInfo apply_info color666" v-if="showApplyInfo">
                    <div v-for="item in applyLst" :key="item.id">
                        <h3>{{item.projectName}}继续教育</h3>
                        <div class="apply_info_item">
                            <dl>
                                <dt class="f_left">真实姓名：</dt>
                                <dd class="f_left">{{item.realName}}</dd>
                            </dl>
                            <dl>
                                <dt class="f_left">报考专业：</dt>
                                <dd class="f_left">{{item.majorName}}</dd>
                            </dl>
                            <dl>
                                <dt class="f_left">订单编号：</dt>
                                <dd class="f_left">{{item.tradeNo}}</dd>
                            </dl>
                            <dl>
                                <dt class="f_left">报名方式：</dt>
                                <dd class="f_left" v-if="item.applyWay==0">个人报名</dd>
                                <dd class="f_left" v-if="item.applyWay==1">企业报名</dd>
                            </dl>
                            <template v-if="item.tradeStatus!=2&&item.applyWay==0">
                                <router-link type="button" class="apply_info_btn" :to="String.Format('/apply/flow_order/{0}',item.tradeNo)">继续报名</router-link>
                                <a type="button" class="apply_info_btn apply_delete" @click="deleteApply(item.tradeNo)">删除</a>
                            </template>
                            <template v-if="item.tradeStatus==2">
                                <template v-if="item.isFinish==0&&item.productId>0">
                                    <router-link type="button" class="apply_info_btn" :to="String.Format('/play/task/{0}/{1}',
									item.id,item.period)">去网络学习</router-link>
                                </template>
                                <template v-if="item.applyWay==0">
                                    <a v-if="item.applyPrice>0" class="apply_info_btn" target="_blank" @click="lookInvoice(item.tradeNo)">查看发票</a>
                                    <a class="apply_info_btn apply_delete" title="申请退费" target="_blank" @click="refundBtn(item)">申请退费</a>
                                </template>
                                <template v-if="item.isFinish==1">
                                    <a class="apply_info_btn" target="_blank" @click="lookCertificate(item.id)">查看证书</a>
                                </template>
                            </template>
                        </div>
                    </div>
                    <div v-for="item in faceApply" :key="item.id">
                        <h3>继续教育（面授）</h3>
                        <div class="apply_info_item">
                            <dl>
                                <dt class="f_left">真实姓名：</dt>
                                <dd class="f_left">{{item.realName}}</dd>
                            </dl>
                            <dl>
                                <dt class="f_left">报考专业：</dt>
                                <dd class="f_left">{{item.majorName}}</dd>
                            </dl>
                            <dl>
                                <dt class="f_left">订单编号：</dt>
                                <dd class="f_left">{{item.tradeNo}}</dd>
                            </dl>
                            <dl>
                                <dt class="f_left">报名方式：</dt>
                                <dd class="f_left" v-if="item.applyWay==0">个人报名</dd>
                                <dd class="f_left" v-if="item.applyWay==1">企业报名</dd>
                            </dl>
                            <template v-if="item.tradeStatus!=2&&item.applyWay==0">
                                <router-link type="button" class="apply_info_btn" :to="String.Format('/apply/flow_order/{0}',item.tradeNo)">继续报名</router-link>
                                <a type="button" class="apply_info_btn apply_delete" @click="deleteApply(item.tradeNo)">删除</a>
                            </template>
                            <template v-if="item.tradeStatus==2">
                                <router-link type="button" target="_blank" class="apply_info_btn" :to="String.Format('/other/class_card/{0}',item.tradeNo)">查看面授听课证</router-link>
                                <template v-if="item.applyWay==0">
                                    <a  v-if="item.applyPrice>0"class="apply_info_btn" target="_blank" @click="lookInvoice(item.tradeNo)">查看发票</a>
                                    <a class="apply_info_btn apply_delete" title="申请退费" target="_blank" @click="refundBtn(item)">申请退费</a>
                                </template>
                                <!-- <template v-if="item.projectName!='三类人员'"> -->
                                    <router-link target="_blank" class="apply_info_btn" :to="String.Format('/other/facejie_card/{0}',item.tradeNo)">查看面授结业证</router-link>
                                <!-- </template> -->
                                <template v-if="item.isFinish==1">
                                    <a class="apply_info_btn" target="_blank" @click="lookCertificate(item.id)">查看证书</a>
                                </template>
                                <a v-if="item.projectName!='三类人员'" type="button" class="apply_info_btn" @click="toTiPrev(item.id)">体检预约</a><!-- 只有面授才显示出 -->
                            </template>
                        </div>
                    </div>
                </div>
                <!-- 没有报名信息-->
                <div class="user_userInfo apply_info apply_info_no_list color666" v-if="!showApplyInfo">
                    <h3>报名信息（继续教育）</h3>
                    <div class="apply_info_item">
                        <img src="../../../static/img/user/noimformation_02.png">
                        <p>抱歉您当前没有报名信息~<br>您可以点击 <router-link to="/index">立即报名</router-link>前往报名~</p>
                    </div>
                </div>
            </div>
        </commonUserinfo>
        <!-- 退款 -->
        <el-dialog class="refund_dialog text_center dialog" title="提示" :visible.sync="dialogVisibleRefund" width="40%">
            <div class="refund_dialog_content">
                <!-- <img src="/static/img/wenxintishi.png" width="400px" height="72px"> -->
                <el-form label-width="100px" class="text_left" style="width: 400px;margin: 60px auto;margin-bottom: 100px;">
                    <el-form-item label="订单编号：">
                        <p>{{refundData.tradeNo}}</p>
                    </el-form-item>
                    <el-form-item label="退费原因：">
                        <el-input type="textarea" cols="10" onkeyup="this.value=this.value.substring(0, 200)"
                            placeholder="最多可输入200字!" v-model.trim="refundForm.reason"></el-input>
                    </el-form-item>
                    <p style="color: #ff0000;">退款扣除手续费千分之六，可先咨询客服确认后申请退款！</p>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleRefund = false">取 消</el-button>
                <el-button type="primary" @click="refundConfirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import commonUserinfo from '../../components/c_userinfo.vue'
    export default {
        name: "apply_info",
        data: function() {
            return {
                itemIndex: 1,
                userLeftHeight: '',
                showApplyInfo: false,
                applyLsts: false,
                applyInfoOneTop: 0,
                applyLst: [],
                faceApply: [],
                projectId: 0,
                refundData: {},
                dialogVisibleRefund: false,
                refundForm: {
                    reason: ''
                },
            }
        },
        mounted: function() {
            var that = this;
            this.showApplyInfo = false;
            this.common.post(this.api.getApplyInfo, {
                projectId: this.projectId
            }, function(res) {
                that.applyLst = res.resultMap.apply;
                that.faceApply = res.resultMap.faceApply;
                if (that.applyLst.length > 0 || that.faceApply.length > 0) {
                    that.showApplyInfo = true;
                }
                setTimeout(function() {
                    that.userLeftHeight = that.$refs.userRightH.offsetHeight - 2 + "px";
                }, 10);
            });
        },
        methods: {
            deleteApply: function(tradeNo) {
                var that = this;
                this.common.post(this.api.delApply, {
                    tradeNo: tradeNo
                }, function(res) {
                    that.$message.success('删除成功！');
                    setTimeout(function() {
                        window.location.reload();
                    }, 1000);
                }, function(error) {
                    that.$message.error(error.resultMsg);
                });
            },
            lookInvoice: function(tradeNo) {
                this.common.toPage("/other/invoice/" + tradeNo);
            },
            lookCertificate: function(applyid) {
                this.common.post(this.api.lookCertificate, {
                    applyid: applyid
                }, function(res) {
                    setTimeout(function() {
                        window.open(res.resultMap);
                    }, 2000);
                });
            },
            toTiPrev: function(applyId) {
                var that = this;
                this.common.toPage('/other/ti_prev/' + applyId);
            },
            refundBtn: function(data) {
                this.dialogVisibleRefund = true;
                this.refundData = data;
                this.refundForm.reason = "";
            },
            refundConfirm: function() {
                if (this.refundForm.reason == '') {
                    this.$message.error('请输入退款原因！')
                    return;
                }
                var that = this;
                this.common.post(this.api.refund, {
                    tradeNo: this.refundData.tradeNo,
                    reason:this.refundForm.reason
                }, function(res) {
                    that.$message.error('退款申请已提交！')
                    // that.common.toPage("/apply/refund_success/" + that.tradeNo);
                    that.dialogVisibleRefund=false;
                });

            },

        },
        components: {
            commonUserinfo
        }
    }
</script>

<style>
    .refund_dialog .el-dialog__header {
        font-size: 20px;
        color: #333333;
        border-bottom: 1px solid #dddddd;
    }

    .refund_dialog .el-dialog__body {
        padding: 0;
    }

    .refund_dialog .el-dialog__footer {
        text-align: center;
        height: 59px;
        line-height: 59px;
        padding: 0;
        border-top: 1px solid #dddddd;
    }
</style>
